<style>
    .none{
        display: none;
    }
</style>
<div class="container-fluid mt-4">
    <!-- 头部标题 -->
    <div class="card mb-2">
        <!--Card content-->
        <div class="card-body">
            <h6 class="mb-2 mb-sm-0 pt-1" style="text-align: center;">老师管理</h6>
        </div>
    </div>
    <!-- 头部标题-end -->
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg">
            <div class="card mb-2">
                <!--Card content-->
                <div class="card-body">
                    <form>
                        <div class="form-row align-items-center mb-3">
                            <div class="col-auto">
                                <div class="input-group input-group-sm">
                                    <input type="text" class="form-control text"  placeholder="老师名称" >
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" type="button" onclick="search()">搜索</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-auto">
                                <button type="button" class="btn btn-success btn-sm" data-toggle="modal"
                                    data-target="#addTeacher" onclick="addTeacher()">添加新老师</button>
                            </div>
                        </div>
                    </form>
                    <table class="table table-striped table-bordered table-align">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">老师编号</th>
                                <th scope="col">老师名称</th>
                                <th scope="col">登录账号</th>
                                <th scope="col">账号权限</th>
                                <th scope="col">账号状态</th>
                                <th scope="col">操作</th>
                            </tr>
                        </thead>
                        <tbody id="showBody">
                            <!-- 添加列表 -->

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 课程添加 -->
<div class="modal fade" id="addTeacher" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">老师添加</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="teachername">老师名称</label>
                        <input type="text" class="form-control" id="teachername">
                    </div>
                    <div class="form-group">
                        <label for="newName">登录账号</label>
                        <input type="text" class="form-control" id="newName">
                    </div>
                    <div class="form-group">
                        <label for="role">角色选择</label>
                        <select class="form-control" id="role">
                            <option value="0">请选择角色</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="newTeacher(this)">添加</button>
            </div>
        </div>
    </div>
</div>
<!-- 课程添加-结束 -->
<!-- 课程修改 -->
<div class="modal fade" id="settingTeacher" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">老师信息修改</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="teacherno1">老师编号</label>
                        <input type="text" class="form-control" value="1" id="teacherno1" readonly>
                    </div>
                    <div class="form-group">
                        <label for="teachername1">老师名称</label>
                        <input type="text" class="form-control" value="王二" id="teachername1">
                    </div>
                    <div class="form-group">
                        <label for="username1">登录账号</label>
                        <input type="text" class="form-control" value="wanger" id="username1">
                    </div>
                    <div class="form-group">
                        <label for="role">角色选择</label>
                        <select class="form-control" id="role1">
                            <option value="0">请选择角色</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="update(this)">更新</button>
            </div>
        </div>
    </div>
</div>
<!-- 课程修改-结束 -->
<script>
//遍历表格
function refresh() {
    $.ajax({
            url:"../videoCourse_stu/server/teacherPage.php",
            type:"post",
        }).done((result)=>{
            var str="";
            $("#showBody").html("");
            for (const p of result) {
                var status="";
                var show="";
                if (p.status==1) {
                    status="启用";
                    show="禁用";
                    str+=`<tr>
                            <th value="${p.roleId}">${p.teacherId}</th>
                            <td class="name">${p.teacherName}</td>
                            <td>${p.username}</td>
                            <td>${p.roleName}</td>
                            <td class="text-success">${status}</td>
                            <td>
                                <button type="button" class="btn btn-danger btn-sm" onclick="change(this)">${show}</button>
                                <button type="button" class="btn btn-warning btn-sm" onclick="reset(this)">密码重置</button>
                                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                    data-target="#settingTeacher" onclick="show(this)">更新</button>
                            </td>
                        </tr>`;
                }
                else{
                    status="禁用";
                    show="启用";
                    str+=`<tr>
                            <th value="${p.roleId}">${p.teacherId}</th>
                            <td class="name">${p.teacherName}</td>
                            <td>${p.username}</td>
                            <td>${p.roleName}</td>
                            <td class="text-danger">${status}</td>
                            <td>
                                <button type="button" class="btn btn-info btn-sm" onclick="change(this)">${show}</button>
                                <button type="button" class="btn btn-warning btn-sm" onclick="reset(this)">密码重置</button>
                                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                    data-target="#settingTeacher" onclick="show(this)">更新</button>
                            </td>
                        </tr>`;
                }
            }
            $("#showBody").append(str);
        });
    }
    refresh();

//搜索
    function search() {
        var txt=$(".text").val();
        if (txt) {
            for (let i = 0; i < $(".name").length; i++) {
            var str=$(".name:eq("+i+")").html();
            if(txt==str){
                $("#showBody tr").eq(i).removeClass("none");
                $("#showBody tr").eq(i).siblings().addClass("none");
            }
        }
        }else{
            for (let j = 0; j <  $(".name").length; j++) {
                $("#showBody tr").eq(j).removeClass("none");
            }
        }
    }

//更新新老师列表
function addTeacher() {
    $.ajax({
        url:"../videoCourse_stu/server/teacherPageRefresh.php",
        type:"post",
        }).done((result)=>{
        $("#role")[0].length=1;
        var str="";
        for (let i = 1; i < result.length; i++) {
            str+=` <option value="${result[i].roleId}">${result[i].roleName}</option>`;
        }
        $("#role").append(str);
    });
}
//添加新老师
    function newTeacher(obj) {
        var id="400"+($("#showBody tr").length+1);
        var name=$("#teachername").val();
        var username=$("#newName").val();
        var roleId=$("#role").val();
        console.log(name,username,roleId);
        if (name && username && roleId!=0) {
            $.ajax({
                url:"../videoCourse_stu/server/teacherPageAdd.php",
                type:"post",
                data:{
                    id,
                    name,
                    username,
                    status:1,
                    roleId,
                },
                dataType:"json"
            }).done((result)=>{
                if (!result.success) {
                    toastr.error(result.msg);
                }
                refresh();
            });
        }else{
            toastr.warning("姓名，账号，或角色不能为空");
        }
        $(obj).attr("data-dismiss","modal")
    }

//禁用
    function change(obj) {
        if ($(obj).html()=="禁用") {
            var id=$(obj).parents()[1].children[0].innerHTML;
            var role=$(obj).parents()[1].children[0];
            var roleId=$(role).attr("value");
            var status=0;
        }else{
            var id=$(obj).parents()[1].children[0].innerHTML;
            var status=1;
            var role=$(obj).parents()[1].children[0];
            var roleId=$(role).attr("value");
        }

        $.ajax({
            url:"../videoCourse_stu/server/teacherPageChange.php",
                type:"post",
                data:{
                    roleId,
                    id,
                    status
                },
        }).done((result)=>{
            console.log(result);
            if (!result.success) {
                toastr.error(result.msg);
            }else{
                
            }
        });
        refresh();
        $(obj).attr("data-dismiss","modal")
    }

//重置密码
    function reset(obj) {
        var id=$(obj).parents()[1].children[0].innerHTML;
        var role=$(obj).parents()[1].children[0];
        var roleId=$(role).attr("value");

        $.ajax({
            url:"../videoCourse_stu/server/teacherPageReset.php",
                type:"post",
                data:{
                    roleId,
                    id,
                },
        }).done((result)=>{
            console.log(result);
            if (!result.success) {
                toastr.error(result.msg);
            }
        });
        refresh();
        $(obj).attr("data-dismiss","modal")
    }


//先获取弹出层的改变
    function show(obj) {
        $.ajax({
            url:"../videoCourse_stu/server/teacherPageShow.php",
            type:"post",
        }).done((result)=>{
            $("#role1")[0].length=1;
            var str="";
            for (let i = 1; i < result.length; i++) {
                str+=`<option value="${result[i].roleId}">${result[i].roleName}</option>`;
            }
            $("#role1").append(str);
            var id=$(obj).parents()[1].children[0].innerHTML;

            var name=$(obj).parents()[1].children[1].innerHTML;
            var username=$(obj).parents()[1].children[2].innerHTML;
            $("#teacherno1").val(id);
            var role=$(obj).parents()[1].children[0];
            var roleId=$(role).attr("value");

            $("#teacherno1").attr("name",roleId);
            $("#teachername1").val(name);
            $("#username1").val(username);
            $("#role1").val(roleId);
        });
    }

//更新
    function update(obj) {
        var id=$("#teacherno1").val();
        var name=$("#teachername1").val();
        var username=$("#username1").val();
        var role=$("#role1").val();
        // console.log(id,name,username,role);
        if (role!=0) {
            $.ajax({
            url:"../videoCourse_stu/server/teacherPageUpdate.php",
            type:"post",
            data:{
                role,
                id,
                name,
                username,
            },
        }).done((result)=>{
            console.log(result);
            if (!result.success) {
                toastr.error(result.msg);
                
            }else{
                $("#settingTeacher").modal("hide");
                refresh();
            }
        });
        }
    }
</script>